<template>
    <div class="studentDynamicBox">
        <div class="title">
            <label>好友动态</label>
        </div>

        <div class="dynamicBox">
            <div class="dynamicList">
                <!--头像和名字-->
                <div class="userInfo clearFix">
                    <div class="avatar">
                        <el-avatar :size="50" :src="src" @error="errorHandler">
                            <img :src="src"/>
                        </el-avatar>
                    </div>
                    <div class="nameBox">
                        <label class="userName">张思琪</label>
                        <label class="time">2020-4-15 <span>15:22</span></label>
                    </div>
                </div>

                <!--内容与图片-->
                <div class="dynamicContent">
                    <p>已是人间孤鸿，你是清晨朝暮</p>
                    <ul class="contentBox clearFix">
                        <li class="imgBox">
                            <el-image :src="src">
                                <div slot="placeholder" class="image-slot">
                                    加载中<span class="dot">...</span>
                                </div>
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                        </li>
                    </ul>
                </div>

                <!--小眼睛一组图标-->
                <div class="forwardBox">
                    <label>
                        <i class="el-icon-view"></i>
                        <span>1</span>
                    </label>
                    <el-divider direction="vertical"></el-divider>
                    <label>
                        <i class="iconfont icon-zan"></i>
                        <span>6</span>
                    </label>
                    <el-divider direction="vertical"></el-divider>
                    <label>
                        <i class="el-icon-chat-dot-square"></i>
                        <span>1</span>
                    </label>
                    <el-divider direction="vertical"></el-divider>
                    <label>
                        <i class="el-icon-share"></i>
                        <span>1</span>
                    </label>
                </div>

                <!--输入框-->
                <div class="inputBox">
                    <el-input
                            type="textarea"
                            :rows="2"
                            :show-word-limit="true"
                            maxlength="200"
                            placeholder="请输入内容"
                            v-model="textarea">
                    </el-input>
                    <div class="btns clearFix">
                        <label class="icons">
                            <i class="iconfont icon-icon_expression"></i>
                            <i class="el-icon-picture"></i>
                        </label>
                        <label class="btnPL">
                            <el-checkbox v-model="checked">同时转发到我的空间</el-checkbox>
                            <el-button type="primary" size="small" style="margin-left: 15px;">评论</el-button>
                        </label>
                    </div>
                </div>

                <!--评论内容-->
                <div class="interaction">
                    <div class="commentBox">
                        <div class="commentList clearFix">
                            <div class="avatar">
                                <el-avatar :size="40" :src="src" @error="errorHandler">
                                    <img :src="src"/>
                                </el-avatar>
                            </div>
                            <div class="nameBox">
                                <p><label>张思琪：</label>好文艺呀！</p>
                                <div class="imgBox" v-if="false">
                                    <el-image :src="src">
                                        <div slot="placeholder" class="image-slot">
                                            加载中<span class="dot">...</span>
                                        </div>
                                        <div slot="error" class="image-slot">
                                            <i class="el-icon-picture-outline"></i>
                                        </div>
                                    </el-image>
                                </div>
                                <label class="time">昨天 <span>15:22</span></label>
                                <el-button type="text" style="padding: 0;">回复</el-button>
                            </div>
                        </div>
                    </div>
                     <!-- 回复评论 -->
                    <div v-if="false" class="huiFuComment">
                        <div class="commentList clearFix">
                            <div class="avatar">
                                <el-avatar :size="40" :src="src" @error="errorHandler">
                                    <img :src="src"/>
                                </el-avatar>
                            </div>
                            <div class="nameBox">
                                <p><label>张思琪</label><span class="huifu">回复</span><label>张思琪：</label>好文艺呀！</p>
                                <div class="imgBox">
                                    <el-image :src="src">
                                        <div slot="placeholder" class="image-slot">
                                            加载中<span class="dot">...</span>
                                        </div>
                                        <div slot="error" class="image-slot">
                                            <i class="el-icon-picture-outline"></i>
                                        </div>
                                    </el-image>
                                </div>
                                <label class="time">昨天 <span>15:22</span></label>
                                <el-button type="text" style="padding: 0;">回复</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="dynamicList">
                <!--头像和名字-->
                <div class="userInfo clearFix">
                    <div class="avatar">
                        <el-avatar :size="50" :src="src" @error="errorHandler">
                            <img :src="src"/>
                        </el-avatar>
                    </div>
                    <div class="nameBox">
                        <label class="userName">张思琪</label>
                        <label class="time">2020-4-15 <span>15:22</span></label>
                    </div>
                </div>

                <!--内容与图片-->
                <div class="dynamicContent">
                    <p><label>【转】</label> 本届高一信息技术教学方式与以往不同，采取走班教学，原因主要有两方面：一、学生班额人数较多，而机房电脑数目不足，要保证每位学生上课时都有机可用，走班教学是很好的方法...</p>
                    <ul class="contentBox clearFix" v-if="false">
                        <li class="imgBox">
                            <el-image :src="src">
                                <div slot="placeholder" class="image-slot">
                                    加载中<span class="dot">...</span>
                                </div>
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                        </li>
                    </ul>
                </div>

                <!--小眼睛一组图标-->
                <div class="forwardBox">
                    <label>
                        <i class="el-icon-view"></i>
                        <span>1</span>
                    </label>
                    <el-divider direction="vertical"></el-divider>
                    <label>
                        <i class="iconfont icon-zan"></i>
                        <span>6</span>
                    </label>
                    <el-divider direction="vertical"></el-divider>
                    <label>
                        <i class="el-icon-chat-dot-square"></i>
                        <span>1</span>
                    </label>
                    <el-divider direction="vertical"></el-divider>
                    <label>
                        <i class="el-icon-share"></i>
                        <span>1</span>
                    </label>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                src:require('../../../assets/img/headportrait03.jpg'),
                textarea:"",
                checked:false
            }
        },
        methods: {
            errorHandler() {
                return true
            }
        }
    }
</script>

<style lang="scss" scoped>
.studentDynamicBox{
    background-color: white;
    padding-bottom: 15px;
    .title{
        background-color: #f5f7fa;
        font-size: 14px;
        color: #303133;
        box-sizing: border-box;
        padding: 10px;
        text-align: left;
    }
    .dynamicBox{
        box-sizing: border-box;
        padding: 0 10px;
        margin: 10px 0;

       .dynamicList{
           border: 1px solid #909399;
           box-sizing: border-box;
           padding: 10px 50px 10px 10px;
           margin-bottom: 20px;
           .userInfo{
               .avatar{
                   float: left;
               }
               .nameBox{
                   float: left;
                   text-align: left;
                   margin-left: 10px;
                   label{
                       display: block;
                   }
                   .time{
                       font-size: 12px;
                       color: #909399;
                       margin-top: 8px;
                   }
                   .userName{
                       font-size: 14px;
                       color: #409EFF;
                       margin-top: 5px;
                   }
               }
           }
           .dynamicContent{
               text-align: left;
               label{
                   color: #409EFF;
               }
               p{
                   overflow-wrap: anywhere;
                   margin-block-start: 0;
                   margin-block-end: 0;
                   text-align: justify;
                   color: #303133;
                   font-size: 14px;
                   margin: 10px 0;
               }
               .contentBox{
                   margin-block-start: 0;
                   margin-block-end: 0;
                   padding-inline-start: 0;
                   list-style-type: none;
                   .imgBox{
                       width: 196px;
                       height: 196px;
                       float: left;
                       margin: 0 10px 10px 0;
                   }
               }
           }


       }

       .forwardBox{
           font-size: 14px;
           color: #909399;
           text-align: right;
           margin: 10px 0;
           label{
               cursor: pointer;
               span{
                   margin-left: 6px;
               }
           }
       }

        .inputBox{
            .btns{
                margin: 10px 0;
                .icons{
                    display: block;
                    float: left;
                    margin-top: 6px;
                    i{
                        font-size: 22px;
                        color: #409EFF;
                        margin-right: 15px;
                        cursor: pointer;
                    }
                }
                .btnPL{
                    display: block;
                    float: right;
                }
            }
        }

       .interaction{
           box-sizing: border-box;
           padding: 10px 15px;
           border-top: 1px solid #909399;
           .commentList{
               .avatar{
                   float: left;
               }
               .nameBox{
                   float: left;
                   text-align: left;
                   margin-left: 10px;
                   width: 855px;
                   p{
                       margin-block-start: 0;
                       margin-block-end: 0;
                       text-align: justify;
                       color: #303133;
                       font-size: 14px;
                       margin: 2px 0;
                       label{
                           color: #409EFF;
                       }
                   }
                   .imgBox{
                       width: 196px;
                       height: 196px;
                       margin: 5px 0;
                   }
                   .time{
                       color: #303133;
                       font-size: 12px;
                       margin-right: 10px;
                   }
               }
           }
           .huiFuComment{
               margin: 10px 0px 10px 40px;
               .huifu{
                   margin: 0 5px;
               }
           }
       }

    }

    .clearFix::after{
        content: "";
        display: block;
        width: 100%;
        font-size: 0;
        clear: both;
    }
}
</style>